<template>
  <div class="check-in">
    <header class="header">
      <h1>打卡操作</h1>
    </header>

    <div class="check-in-content">
      <div class="plan-info">
        <h2>{{ plan.title }}</h2>
        <p class="description">{{ plan.description }}</p>
        <div class="info-row">
          <span class="label">打卡类型：</span>
          <span>{{ getTypeText(plan.type) }}</span>
        </div>
        <div class="info-row">
          <span class="label">当前进度：</span>
          <span>{{ plan.completedDays }}/{{ plan.totalDays }}天</span>
        </div>
      </div>

      <div class="check-in-form">
        <div class="today-info">
          <div class="date">{{ formatDate(today) }}</div>
          <div class="time">{{ currentTime }}</div>
        </div>

        <ProgressBar
          :current="plan.completedDays"
          :total="plan.totalDays"
          text="完成进度"
        />

        <div class="form-group">
          <label for="note">打卡备注</label>
          <textarea
            id="note"
            v-model="form.note"
            rows="3"
            placeholder="记录一下今天的完成情况吧~"
          ></textarea>
        </div>

        <div class="check-in-status" v-if="!isCheckedIn">
          <div class="status-icon">
            <span class="material-icons">schedule</span>
          </div>
          <div class="status-text">
            <h3>待打卡</h3>
            <p>今天还没有打卡记录哦~</p>
          </div>
        </div>

        <div class="check-in-status checked" v-else>
          <div class="status-icon">
            <span class="material-icons">check_circle</span>
          </div>
          <div class="status-text">
            <h3>已打卡</h3>
            <p>今天已经完成打卡啦！</p>
          </div>
        </div>

        <div class="form-actions">
          <button
            type="button"
            class="check-in-btn"
            @click="submitCheckIn"
            :disabled="isCheckedIn"
          >
            {{ isCheckedIn ? '今日已打卡' : '立即打卡' }}
          </button>
          <router-link
            :to="`/plan-detail/${plan.id}`"
            class="view-detail-btn"
          >
            查看详情
          </router-link>
        </div>
      </div>

      <div class="check-in-calendar">
        <h2>打卡日历</h2>
        <Calendar />
      </div>
    </div>
  </div>
</template>

<script>
import Calendar from '@/components/CheckInCalendar.vue'
import ProgressBar from '@/components/ProgressBar.vue'

export default {
  name: 'CheckIn',
  components: {
    Calendar,
    ProgressBar
  },
  data() {
    return {
      plan: null,
      today: new Date(),
      currentTime: '',
      isCheckedIn: false,
      form: {
        note: ''
      }
    }
  },
  created() {
    // TODO: 从Vuex获取数据
    // 模拟数据
    this.plan = {
      id: this.$route.params.id,
      title: '每日阅读',
      description: '每天阅读30分钟，提升自己',
      type: 'daily',
      completedDays: 15,
      totalDays: 30
    }
    this.updateTime()
    // 更新当前时间
    setInterval(this.updateTime, 1000)
  },
  methods: {
    getTypeText(type) {
      const typeMap = {
        daily: '每日打卡',
        weekly: '每周打卡',
        monthly: '每月打卡'
      }
      return typeMap[type] || type
    },
    formatDate(date) {
      return date.toLocaleDateString('zh-CN')
    },
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },
    async submitCheckIn() {
      // TODO: 提交到Vuex
      console.log('提交打卡：', {
        planId: this.plan.id,
        date: this.today,
        time: this.currentTime,
        note: this.form.note
      })

      // 模拟提交成功
      this.isCheckedIn = true
      this.$router.push(`/plan-detail/${this.plan.id}`)
    }
  },
  beforeUnmount() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.check-in {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
}

.header h1 {
  margin: 0;
  color: #333;
}

.check-in-content {
  display: grid;
  gap: 30px;
}

.plan-info,
.check-in-form,
.check-in-calendar {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.plan-info h2 {
  margin: 0 0 10px;
  color: #333;
}

.description {
  color: #666;
  margin-bottom: 15px;
}

.info-row {
  margin-bottom: 8px;
  font-size: 14px;
}

.info-row .label {
  color: #666;
  margin-right: 8px;
}

.today-info {
  text-align: center;
  margin-bottom: 20px;
}

.today-info .date {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.today-info .time {
  font-size: 36px;
  font-weight: bold;
  color: #4caf50;
  margin-top: 10px;
}

.form-group {
  margin: 20px 0;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: vertical;
  font-size: 14px;
}

.check-in-status {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: #fff3e0;
  border-radius: 10px;
  margin: 20px 0;
}

.check-in-status.checked {
  background-color: #e8f5e9;
}

.status-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #ffe0b2;
}

.check-in-status.checked .status-icon {
  background-color: #c8e6c9;
}

.status-icon .material-icons {
  font-size: 24px;
  color: #f57c00;
}

.check-in-status.checked .status-icon .material-icons {
  color: #2e7d32;
}

.status-text h3 {
  margin: 0 0 5px;
  color: #333;
}

.status-text p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-actions {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.check-in-btn,
.view-detail-btn {
  flex: 1;
  padding: 12px 0;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s;
}

.check-in-btn {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.check-in-btn:hover {
  background-color: #45a049;
}

.check-in-btn:disabled {
  background-color: #c8e6c9;
  cursor: not-allowed;
}

.view-detail-btn {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.view-detail-btn:hover {
  background-color: #e0e0e0;
}

.check-in-calendar h2 {
  margin: 0 0 20px;
  color: #333;
  font-size: 18px;
}
</style>